<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      @keyup.enter.native="search()"
    >
      <!-- <el-form-item label>
                <el-input v-model="formInline.activityName" placeholder="请输入活动名称" clearable></el-input>
            </el-form-item>-->
      <el-form-item label="服务记录编号">
        <br />
        <br />
        <el-input
          v-model="formInline.keyword"
          placeholder="请输入服务记录编号"
          clearable
          style="margin-left:-80px;width:200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="会员名称">
        <br />
        <br />
        <el-input
          v-model="formInline.memberName"
          placeholder="请输入会员名称"
          clearable
          style="margin-left:-60px;width:200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="会员手机号">
        <br />
        <br />
        <el-input
          v-model="formInline.memberPhone"
          placeholder="请输入会员手机号"
          clearable
          style="margin-left:-70px;width:200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="大区名称">
        <br />
        <br />
        <el-input
          v-model="formInline.upOrgZone"
          placeholder="请输入大区名称"
          clearable
          style="margin-left:-60px;width:200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="营销区域名称">
        <br />
        <br />
        <el-input
          v-model="formInline.baseName"
          placeholder="请输入营销区域名称"
          clearable
          style="margin-left:-60px;width:200px"
        ></el-input>
      </el-form-item>
      <br />
      <el-form-item label="店铺名称">
        <br />
        <br />
        <el-input
          v-model="formInline.storeName"
          placeholder="请输入店铺名称"
          clearable
          style="margin-left:-60px;width:200px"
        ></el-input>
      </el-form-item>
      <el-form-item label="店铺授权编码">
        <br />
        <br />
        <el-input
          v-model="formInline.authCode"
          placeholder="请输入店铺授权编码"
          clearable
          style="margin-left:-80px;width:200px"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label>
                <el-input v-model="formInline.receivePhone" placeholder="请输入收货人手机号" clearable></el-input>
            </el-form-item>-->
      <el-form-item label="维护人姓名">
        <br />
        <br />
        <el-input
          v-model="formInline.userName"
          placeholder="请输入维护人姓名"
          clearable
          style="margin-left:-70px;width:200px"
        ></el-input>
      </el-form-item>

      <!-- <el-form-item label>
                <el-input v-model="formInline.giftName" placeholder="请输入赠品名称" clearable></el-input>
            </el-form-item>
            <el-form-item label>
                <el-input v-model="formInline.giftCode" placeholder="请输入赠品编码" clearable></el-input>
            </el-form-item>-->
      <el-form-item label="维护人岗位">
        <br />
        <br />
        <el-select
          v-model="formInline.userTypeName"
          placeholder="请选择维护人岗位"
          clearable
          style="margin-left:-70px;width:200px"
        >
          <el-option label="店主" value="店主"></el-option>
          <el-option label="店长" value="店长"></el-option>
          <el-option label="店员" value="店员"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会员等级">
        <br />
        <br />
        <el-select
          v-model="formInline.gradeName"
          placeholder="请选择会员等级"
          clearable
          style="margin-left:-60px;width:200px"
        >
          <el-option
            v-for="(send, i) in options"
            :key="i"
            :value="send.gradelevelName"
            :label="send.gradelevelName"
          ></el-option>
        </el-select>
      </el-form-item>
      <br />
      <el-form-item label="绑定关系">
        <br />
        <br />
        <el-select
          v-model="formInline.bindingRelation"
          placeholder="请选择绑定关系"
          clearable
          style="margin-left:-60px;width:200px"
        >
          <el-option label="强绑定" value="强绑定"></el-option>
          <el-option label="弱绑定" value="弱绑定"></el-option>
          <el-option label="已流失" value="已流失"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建日期">
        <br />
        <br />
        <el-date-picker
          v-model="formInline.dateRange"
          type="daterange"
          align="right"
          style="margin-left:-60px;width:430px"
          unlink-panels
          range-separator="至"
          start-placeholder="创建开始日期"
          end-placeholder="创建结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="服务日期">
        <br />
        <br />
        <el-date-picker
          v-model="formInline.dateRangeFW"
          type="daterange"
          align="right"
          style="margin-left:-60px;width:430px"
          unlink-panels
          range-separator="至"
          start-placeholder="服务开始日期"
          end-placeholder="服务结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item style="margin-left:700px;text-align:right">
        <el-button
          type="primary"
          @click="search()"
          size="mini"
          icon="el-icon-search"
          >查询</el-button
        >
        <!-- </el-form-item>
            <el-form-item> -->
        <el-button
          type="primary"
          @click="kong()"
          size="mini"
          icon="el-icon-delete"
          >清空</el-button
        >
        <!-- </el-form-item>
            <el-form-item> -->
        <el-button
          type="primary"
          @click="showConfigTableDialog()"
          size="mini"
          icon="el-icon-setting"
          :loading="insertLoading"
          >列表配置</el-button
        >
        <el-button
          @click="exportExcel"
          style="margin-top: 0px;"
          size="mini"
          type="success"
          icon="el-icon-s-data"
          :loading="exportLoading"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <!-- <el-table
            @selection-change="selectionChangeHandle"
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
              max-height="350px"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            border
            v-loading="loading"
        >-->
    <el-table
      @selection-change="selectionChangeHandle"
      :data="tableData"
      border
      row-key="id"
      align="left"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      height="400px"
      style="height:500px "
      show-overflow-tooltip
      @sort-change="handleSort"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="55"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :min-width="200"
        :width="dropCol[index].width"
        :label="item.label"
        align="center"
        :sortable="item.sortable"
      ></el-table-column>

      <!-- <el-table-column
                prop="serviceSeq"
                label="服务记录编号"
                width="180"
                align="left"
                show-overflow-tooltip
                v-if="isShow('serviceSeq')"
            ></el-table-column>
            <el-table-column
                prop="serviceTime"
                label="服务时间"
                align="left"
                width="280"
                show-overflow-tooltip
                v-if="isShow('serviceTime')"
            ></el-table-column>
            <el-table-column
                prop="serviceType"
                label="服务类型"
                width="180"
                align="left"
                show-overflow-tooltip
                v-if="isShow('serviceType')"
            ></el-table-column>
            <el-table-column
                prop="serviceDesc"
                label="服务描述"
                width="280"
                align="left"
                show-overflow-tooltip
                v-if="isShow('serviceDesc')"
            ></el-table-column>
            <el-table-column
                prop="upOrgZone"
                label="大区名称"
                width="180"
                align="left"
                show-overflow-tooltip
                v-if="isShow('upOrgZone')"
            ></el-table-column>
            <el-table-column
                prop="baseName"
                label="营销区域名称"
                width="180"
                align="left"
                show-overflow-tooltip
                v-if="isShow('baseName')"
            ></el-table-column>
            <el-table-column
                prop="authCode"
                label="店铺授权编码"
                width="180"
                align="left"
                show-overflow-tooltip
                v-if="isShow('authCode')"
            ></el-table-column>
            <el-table-column
                prop="storeName"
                label="店铺名称"
                width="200"
                align="left"
                show-overflow-tooltip
                v-if="isShow('storeName')"
            ></el-table-column>
            <el-table-column
                prop="userTypeName"
                label="维护人岗位"
                width="180"
                align="left"
                show-overflow-tooltip
                v-if="isShow('userTypeName')"
            ></el-table-column>
            <el-table-column
                prop="userName"
                label="维护人姓名"
                width="180"
                align="left"
                show-overflow-tooltip
                v-if="isShow('userName')"
            ></el-table-column>
            <el-table-column
                prop="memberName"
                label="会员姓名"
                width="180"
                align="left"
                show-overflow-tooltip
                v-if="isShow('memberName')"
            ></el-table-column>
            <el-table-column
                prop="gradeName"
                label="会员等级"
                width="180"
                align="left"
                show-overflow-tooltip
                v-if="isShow('gradeName')"
            ></el-table-column>
            <el-table-column
                prop="memberPhone"
                label="会员手机号"
                width="200"
                align="left"
                show-overflow-tooltip
                v-if="isShow('memberPhone')"
            ></el-table-column>
            <el-table-column
                prop="bindingRelation"
                label="绑定关系"
                width="180"
                align="left"
                show-overflow-tooltip
                v-if="isShow('bindingRelation')"
            ></el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间"
                width="280"
                align="left"
                show-overflow-tooltip
                v-if="isShow('createTime')"
            ></el-table-column>-->
    </el-table>
    <el-form :inline="true" :model="formInline">
      <el-form-item style="margin-top: 6px;"></el-form-item>
    </el-form>
    <div class="block" style="margin-top:-49px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!--列表配置-->
    <el-dialog
      title="列表配置"
      :visible.sync="configTableDialogVisible"
      width="50%"
      @close="closeConfigTableDialog()"
    >
      <div id="configTableDiv">
        <el-form :inline="true" :model="formInline2" class="demo-form-inline">
          <el-form-item label="选择列表字段：">
            <el-checkbox
              :indeterminate="formInline2.isIndeterminate"
              v-model="formInline2.isAll"
              style="margin-top:10px;"
              @change="isAllFieldChange"
              >全选</el-checkbox
            >
          </el-form-item>
          <el-divider></el-divider>
          <el-checkbox-group
            v-model="userMenuShowFields"
            @change="isSingleFieldChange"
          >
            <el-checkbox
              v-for="item in userMenuFieldList"
              :label="item.fieldCode"
              :key="item.fieldCode"
              style="margin:15px 10px;width:120px;"
              >{{ item.fieldName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form>
        <el-row>
          <el-col :span="24" style="text-align: center;margin-top: 30px">
            <el-button type="info" @click="closeConfigTableDialog()" size="mini"
              >取 消</el-button
            >
            <el-button
              type="primary"
              @click="insertUserFieldRelation()"
              size="mini"
              >确 认</el-button
            >
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import {
  queryUserMenuFieldByParam,
  insertUserFieldRelation,
} from '@/api/tradeOrderSearch';
import { queryServiceRecord, exportServiceRecord } from '@/api/memberPrice';
import { getmemberrule } from '@/api/membergrade';
import qs from 'qs';
export default {
  data() {
    return {
      options: [],
      tableData: [],
      allCol: [],
      col: [],
      dropCol: [],
      shopLevelList: [],
      dataListSelections: [],
      lsGoodsList: [],
      loading: true,
      exportLoading: false,
      total: 0,
      listQuery: {
        current: 1,
        size: 100,
      },
      dialogVisible: false,
      dialogVisibleLevel: false,
      insertLoading: false,
      configTableDialogVisible: false, //列表配置弹窗状态
      formInline2: {
        isIndeterminate: false, //是否半选中
        isAll: true, //是否全部显示,
        menuCode: 'serviceRecords',
      },
      userMenuFieldList: [], //全部列名列表
      userMenuAllFields: [], //全部的列名
      userMenuShowFields: [], //显示的列名
      formInline: {
        keyword: '',
        memberName: '',
        memberPhone: '',
        authCode: '',
        upOrgZone: '',
        baseName: '',
        storeName: '',
        receivePhone: '',
        userName: '',
        activityName: '',
        bindingRelation: '',
        giftName: '',
        giftCode: '',
        userTypeName: '',
        gradeName: '',
        bindingRelation: '',
        deliveryType: '',
        isDeliver: '',
        gradelevelId: '',
        prizeLevelId: '',
        dateRange: [],
        dateRangeFW: [],
        orgSeq: '',
        orgType: 1,
        ascs: [],
        desc: ['create_time'],
      },
      rules: {},
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
    };
  },
  mounted() {
    var nowDay = this.getNowDay();
    var beginDay = this.getMonthOneDay();
    this.formInline.dateRangeFW = [beginDay, nowDay];

    this.logininfo = localStorage.getItem('logininfo');
    this.orgList = JSON.parse(this.logininfo).orgList;
    this.formInline.orgSeq =
      this.orgList[0].orgType == 1 ? '' : this.orgList[0].orgSeq;
    this.formInline.orgType = this.orgList[0].orgType;

    this.queryUserMenuFieldByParam(); //加载列表配置字段
    this.getDataList(); //加载列表
    this._getmemberinfo(); //会员等级
    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
    // this.rowDrop()
    this.columnDrop();
  },
  created() {},
  methods: {
    //拖拽列表
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const oldItem = this.dropCol[evt.oldIndex - 2];
          this.dropCol.splice(evt.oldIndex - 2, 1);
          this.dropCol.splice(evt.newIndex - 2, 0, oldItem);
        },
      });
    },
    getNowDay() {
      var date = new Date();
      var seperator1 = '-';
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = '0' + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    getMonthOneDay() {
      var date = new Date();
      var seperator1 = '-';
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = '01';
      if (month >= 1 && month <= 9) {
        month = '0' + month;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    kong() {
      this.formInline.keyword = '';
      this.formInline.memberName = '';
      this.formInline.memberPhone = '';
      this.formInline.upOrgZone = '';
      this.formInline.authCode = '';
      this.formInline.baseName = '';
      this.formInline.storeName = '';
      this.formInline.receivePhone = '';
      this.formInline.userName = '';
      this.formInline.activityName = '';
      this.formInline.giftName = '';
      this.formInline.giftCode = '';
      this.formInline.bindingRelation = '';
      this.formInline.status = '';
      this.formInline.deliveryType = '';
      this.formInline.isDeliver = '';
      this.formInline.userTypeName = '';
      this.formInline.gradeName = '';
      this.formInline.dateRange = [];
      this.formInline.dateRangeFW = [];
      this.formInline.ascs = [];
      this.formInline.desc = ['create_time'];
    },
    search() {
      if (
        this.formInline.dateRangeFW == undefined ||
        this.formInline.dateRangeFW == null ||
        this.formInline.dateRangeFW.length <= 0
      ) {
        this.$message.error('请选择服务日期');
        return;
      }
      this.loading = true;
      this.listQuery.current = 1;
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        ascs: this.formInline.ascs,
        desc: this.formInline.desc,
        condition: {
          serviceSeq: this.formInline.keyword.trim(),
          memberName: this.formInline.memberName.trim(),
          memberPhone: this.formInline.memberPhone.trim(),
          authCode: this.formInline.authCode.trim(),
          upOrgZone: this.formInline.upOrgZone.trim(),
          baseName: this.formInline.baseName.trim(),
          storeName: this.formInline.storeName.trim(),
          receivePhone: this.formInline.receivePhone.trim(),
          userName: this.formInline.userName.trim(),
          activityName: this.formInline.activityName.trim(),
          giftName: this.formInline.giftName.trim(),
          giftCode: this.formInline.giftCode.trim(),
          gradeName: this.formInline.gradeName,
          bindingRelation: this.formInline.bindingRelation,
          deliveryType: this.formInline.deliveryType,
          isDeliver: this.formInline.isDeliver,
          userTypeName: this.formInline.userTypeName,
          createTimeStart:
            this.formInline.dateRange !== null &&
            this.formInline.dateRange.length > 0
              ? this.formInline.dateRange[0]
              : '',
          createTimeEnd:
            this.formInline.dateRange !== null &&
            this.formInline.dateRange.length > 1
              ? this.formInline.dateRange[1]
              : '',
          serviceTimeStart:
            this.formInline.dateRangeFW !== null &&
            this.formInline.dateRangeFW.length > 0
              ? this.formInline.dateRangeFW[0]
              : '',
          serviceTimeEnd:
            this.formInline.dateRangeFW !== null &&
            this.formInline.dateRangeFW.length > 1
              ? this.formInline.dateRangeFW[1]
              : '',
          orgSeq: this.formInline.orgSeq,
          orgType: this.formInline.orgType,
        },
      };
      queryServiceRecord(data).then((res) => {
        this.loading = false;
        this.total = res.total;
        this.tableData = res.records;
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getDataList();
    },

    getDataList() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        ascs: this.formInline.ascs,
        desc: this.formInline.desc,
        condition: {
          serviceSeq: this.formInline.keyword.trim(),
          memberName: this.formInline.memberName.trim(),
          memberPhone: this.formInline.memberPhone.trim(),
          authCode: this.formInline.authCode.trim(),
          upOrgZone: this.formInline.upOrgZone.trim(),
          baseName: this.formInline.baseName.trim(),
          storeName: this.formInline.storeName.trim(),
          receivePhone: this.formInline.receivePhone.trim(),
          userName: this.formInline.userName.trim(),
          activityName: this.formInline.activityName.trim(),
          giftName: this.formInline.giftName.trim(),
          giftCode: this.formInline.giftCode.trim(),
          gradeName: this.formInline.gradeName,
          bindingRelation: this.formInline.bindingRelation,
          deliveryType: this.formInline.deliveryType,
          isDeliver: this.formInline.isDeliver,
          userTypeName: this.formInline.userTypeName,
          createTimeStart:
            this.formInline.dateRange !== null &&
            this.formInline.dateRange.length > 0
              ? this.formInline.dateRange[0]
              : '',
          createTimeEnd:
            this.formInline.dateRange !== null &&
            this.formInline.dateRange.length > 1
              ? this.formInline.dateRange[1]
              : '',
          serviceTimeStart:
            this.formInline.dateRangeFW !== null &&
            this.formInline.dateRangeFW.length > 0
              ? this.formInline.dateRangeFW[0]
              : '',
          serviceTimeEnd:
            this.formInline.dateRangeFW !== null &&
            this.formInline.dateRangeFW.length > 1
              ? this.formInline.dateRangeFW[1]
              : '',
          orgSeq: this.formInline.orgSeq,
          orgType: this.formInline.orgType,
        },
      };
      queryServiceRecord(data).then((res) => {
        this.loading = false;
        this.total = res.total;
        this.tableData = res.records;
      });
    },

    // 多选表1
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    selectEdit() {
      // 配置列表
    },
    exportExcel() {
      let data = {
        condition: {
          serviceSeq: this.formInline.keyword,
          memberName: this.formInline.memberName,
          memberPhone: this.formInline.memberPhone,
          authCode: this.formInline.authCode,
          upOrgZone: this.formInline.upOrgZone,
          baseName: this.formInline.baseName,
          storeName: this.formInline.storeName,
          receivePhone: this.formInline.receivePhone,
          userName: this.formInline.userName,
          activityName: this.formInline.activityName,
          giftName: this.formInline.giftName,
          giftCode: this.formInline.giftCode,
          gradeName: this.formInline.gradeName,
          bindingRelation: this.formInline.bindingRelation,
          deliveryType: this.formInline.deliveryType,
          isDeliver: this.formInline.isDeliver,
          userTypeName: this.formInline.userTypeName,
          createTimeStart:
            this.formInline.dateRange !== null &&
            this.formInline.dateRange.length > 0
              ? this.formInline.dateRange[0]
              : '',
          createTimeEnd:
            this.formInline.dateRange !== null &&
            this.formInline.dateRange.length > 1
              ? this.formInline.dateRange[1]
              : '',
          serviceTimeStart:
            this.formInline.dateRangeFW !== null &&
            this.formInline.dateRangeFW.length > 0
              ? this.formInline.dateRangeFW[0]
              : '',
          serviceTimeEnd:
            this.formInline.dateRangeFW !== null &&
            this.formInline.dateRangeFW.length > 1
              ? this.formInline.dateRangeFW[1]
              : '',
          orgSeq: this.formInline.orgSeq,
          orgType: this.formInline.orgType,
        },
      };
      exportServiceRecord(data)
        .then((res) => {
          const link = document.createElement('a');
          let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
          link.style.display = 'none';
          //设置连接
          link.href = URL.createObjectURL(blob);
          link.download = '商家端服务记录列表.xlsx';
          document.body.appendChild(link);
          //模拟点击事件
          link.click();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //显示配置弹窗
    showConfigTableDialog() {
      this.userMenuShowFields = this.userOldMenuShowFields;
      let checkedCount = this.userMenuShowFields.length;
      this.formInline2.isAll = checkedCount === this.userMenuAllFields.length;
      this.formInline2.isIndeterminate =
        checkedCount > 0 && checkedCount < this.userMenuAllFields.length;
      this.configTableDialogVisible = true;
    },
    //关闭配置弹窗
    closeConfigTableDialog() {
      this.configTableDialogVisible = false;
      let data = {
        menuCode: this.formInline2.menuCode,
      };
    },
    queryUserMenuFieldByParam() {
      let data = {
        menuCode: this.formInline2.menuCode,
      };
      this.userMenuAllFields = []; //全部的列名
      this.userMenuShowFields = []; //显示的列名
      queryUserMenuFieldByParam(data).then((res) => {
        this.userMenuFieldList = res.records;
        this.userMenuFieldList.forEach((item, index) => {
          this.userMenuAllFields.push(item.fieldCode);
          if (item.isShow == 1) {
            this.userMenuShowFields.push(item.fieldCode);
          }
        });
        if (
          this.userMenuShowFields.length == 0 ||
          this.userMenuShowFields.length == this.userMenuAllFields.length
        ) {
          this.userMenuShowFields = this.userMenuAllFields;
          this.formInline2.isAll = true;
        } else {
          this.formInline2.isAll = false;
          this.formInline2.isIndeterminate = true;
        }
        this.insertUserFieldRelation(1);
      });
    },
    getNewCol() {
      let data = {
        menuCode: this.formInline2.menuCode,
      };
      this.col = [];
      this.dropCol = [];
      queryUserMenuFieldByParam(data).then((res) => {
        this.userMenuFieldList = res.records;
        this.userMenuFieldList.forEach((item, index) => {
          if (item.isShow == 1) {
            this.col.push({ label: item.fieldName, prop: item.fieldCode });
            this.dropCol.push({ label: item.fieldName, prop: item.fieldCode });
          }
        });
        if (this.col.length == 0) {
          this.col = this.allCol;
          this.dropCol = this.allCol;
          this.formInline2.isAll = true;
        }
        this.col.forEach((item, index) => {
          if (item.prop == 'serviceTime') {
            this.$set(item, 'sortable', 'service_time');
          }
        });
      });
    },
    //保存显示字段
    insertUserFieldRelation(isInit) {
      if (
        this.userMenuShowFields == null ||
        this.userMenuShowFields.length == 0
      ) {
        this.$message({
          showClose: true,
          message: '列表字段不可为空',
          type: 'info',
        });
        return;
      }
      let data = {
        menuCode: this.formInline2.menuCode,
        fieldList: this.userMenuShowFields,
      };
      if (isInit == 1) {
        insertUserFieldRelation(data).then((res) => {
          if (res.code == 1) {
            this.userOldMenuShowFields = this.userMenuShowFields;
            this.closeConfigTableDialog();
            this.getNewCol();
          }
        });
        return;
      }
      this.insertLoading = true;
      insertUserFieldRelation(data).then((res) => {
        this.insertLoading = false;
        if (res.code == 1) {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'success',
          });
          this.userOldMenuShowFields = this.userMenuShowFields;
          this.closeConfigTableDialog();
          this.getNewCol();
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: 'error',
          });
        }
      });
    },
    //是否全选字段
    isAllFieldChange(val) {
      this.userMenuShowFields = val ? this.userMenuAllFields : [];
      this.formInline2.isIndeterminate = false;
    },
    //是否选中单个字段
    isSingleFieldChange(val) {
      let checkedCount = this.userMenuShowFields.length;
      this.formInline2.isAll = checkedCount === this.userMenuAllFields.length;
      this.formInline2.isIndeterminate =
        checkedCount > 0 && checkedCount < this.userMenuAllFields.length;
    },
    //获取字段勾选状态
    getUserMenuFieldStatus(fieldCode) {
      if (this.userMenuShowFields != null) {
        for (let i = 0; i < this.userMenuShowFields.length; i++) {
          if (this.userMenuShowFields[i] == fieldCode) {
            return true;
          }
        }
        return false;
      }
    },
    //是否显示字段
    isShow(fieldCode) {
      if (this.formInline2.isAll || this.getUserMenuFieldStatus(fieldCode)) {
        return true;
      } else {
        return false;
      }
    },
    _getmemberinfo() {
      let data = {
        size: 99,
        current: 1,
        condition: {},
        ascs: [],
        descs: [],
      };
      getmemberrule(data).then((res) => {
        this.options = res.records;
      });
    },

    handleSort(val) {
      let sortModel = '';
      if (val.order === 'ascending') {
        sortModel = 'ASC';
        this.formInline.ascs = [val.column.sortable];
        this.formInline.desc = [];
        this.search();
      } else if (val.order === 'descending') {
        sortModel = 'DESC';
        this.formInline.ascs = [];
        this.formInline.desc = [val.column.sortable];
        this.search();
      }
      console.log(val, sortModel);
    },
  },
};
</script>
<style lang="less" scoped>
.el-form-item .el-select {
  width: 100%;
}
#configTableDiv .el-divider--horizontal {
  margin-top: 0;
}
</style>
